<script setup lang="ts">
import { tableInfo } from "./interface";
import { ref, watch } from "vue";
import { clone } from "@pureadmin/utils";
const props = withDefaults(defineProps<tableInfo>(), {
  colInfo: () => [
    {
      labelName: "企业名称",
      dataProps: ["data1"]
    },
    { labelName: "企业节点标识前缀", dataProps: ["data2", "data3"] }
  ],
  tableData: () => [
    {
      data1: "浪潮",
      data2: "MA.10000.900000.00000003",
      data3: "12312321"
    },
    {
      data1: "致景",
      data2: "MA.10000.900000.00000019",
      data3: "12312321"
    }
  ]
});
const tableDatas = ref(clone(props, true));
const specailHandle = () => {
  if (tableDatas.value.colInfo[0]["labelName"] == "数据类型编码（1位）") {
    tableDatas.value.colInfo[0]["dataProps"] = ["data1", "data2"];
    tableDatas.value.colInfo[1]["dataProps"] = [
      "data3",
      "data4",
      "data5",
      "data6"
    ];
    const datas = tableDatas.value.tableData;
    const length = datas.length;
    const sData = [];
    let i = 0;
    while (i < length - 2) {
      console.log(datas[i], "i=", i, length);
      sData.push({
        data1: datas[i]["data1"],
        data2: datas[i]["data2"],
        data3: datas[i + 1]["data1"],
        data4: datas[i + 1]["data2"],
        data5: datas[i + 2]["data1"],
        data6: datas[i + 2]["data2"]
      });
      i += 3;
    }
    if (length - i == 1) {
      sData.push({
        data1: datas[i]["data1"],
        data2: datas[i]["data2"]
      });
    } else if (length - i == 2) {
      sData.push({
        data1: datas[i]["data1"],
        data2: datas[i]["data2"],
        data3: datas[i + 1]["data1"],
        data4: datas[i + 1]["data2"]
      });
    }
    tableDatas.value.tableData = sData;
    console.log(tableDatas.value.tableData);
  }
};
specailHandle();
const emit = defineEmits(["btnClick1"]);
const clickBtn1 = () => {
  emit("btnClick1", ["btn1", "11"]);
};
// 表格样式
const headFirst = ({ row, rowIndex, columnIndex }) => {
  // 这里 row[5] 为表头倒数第二列, row[6] 为倒数第一列
  if (rowIndex === 1) {
    return { display: "none" };
  }
};
watch(
  () => props.tableData,
  (newVal, oldVal) => {
    tableDatas.value = clone(props, true);
    specailHandle();
  }
);
</script>

<template>
  <el-col :span="2" :offset="22" class="button-edit">
    <el-button type="primary" class="form-btn1" @click="clickBtn1()">
      编辑
    </el-button>
  </el-col>
  <el-table
    :data="tableDatas.tableData"
    :border="true"
    :header-cell-style="headFirst"
  >
    <el-table-column
      v-for="item in tableDatas.colInfo"
      :key="item.labelName"
      :label="item.labelName"
    >
      <el-table-column v-for="prop in item.dataProps" :prop="prop" />
    </el-table-column>
  </el-table>
</template>

<style lang="scss" scoped>
:deep(.el-table__header th) {
  // background-color: #ebeef5; /* 设置表头背景颜色 */
  background-color: rgb(12, 120, 225) !important; /* 设置表头背景颜色 */
  color: aliceblue;
  font-weight: bold !important;
}
:deep(.el-table__inner-wrapper) {
  font-size: 14px;
  font-weight: 400;
}
.button-edit {
  padding: 0px !important;
  background-color: antiquewhite;
  margin-top: 2vh;
  margin-bottom: 2vh;
  .form-btn1 {
    width: 100%;
    background-color: rgb(12, 120, 225);
  }
  .form-btn1:hover {
    background-color: #79bbff;
  }
}
</style>
